@charset "utf-8";

$fontsize:40;

@function r($px){
    @return $px/$fontsize * 1rem;
}
*{
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
}
//
header{
    width: 100%;
    position: absolute;
    top: 0;
    height: r(125);
    .my-head1{
        width: r(123);
        height: r(57);
        margin-left: r(23);
        margin-top: r(34);
        button{
            width: r(123);
            height: r(57);
            border: none;
            border: 1px solid #ff9344;
            border-radius: r(18);
            background: white;
            font-size: r(26);
        }
    }
    .my-head2{
        width: r(62);
        height: r(56);
        margin-right: r(19);
        margin-top: r(34);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .my-head3{
        margin-left: r(366);
        margin-top: r(60);
        p{
            font-size: r(26);
        }
    }
}
section{
    width:100%;
    position: absolute;
    top: r(125);
    bottom:r(136);
    overflow-y: scroll;
    .my-user{
        width: 100%;
        height: r(196);
        .my-user1{
            width: r(170);
            height: r(170);
            margin-left: r(24);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .my-user2{
            margin-top: r(15);
                font-size: r(87.11);
            
        }
        .my-user3{
            margin-left: r(216);
            h1{
                padding-top: r(31);
                font-size:r(30);
                font-weight: normal;
            }
            p{
                font-size: r(26);
                margin-top: r(34);
                color: #9d9d9d;
            }
        }
    }
    .my-shou{
        width: 100%;
        height: r(151);
        li{
            width: r(195);
            height: r(151);
            margin-right:r(59);
            background: #a0dce0;
            float: left;
            .my-shou-img2{
                width: r(84);
                height: r(80);
                margin: r(20) r(52) r(0) r(59);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                margin-top: r(6);
                text-align: center;
                font-size: r(26);
            }
        }
        li:first-child{
            margin-left: r(23);
            background: #b2e0a0;
            .my-shou-img1{
                width: r(78);
                height: r(82);
                margin: r(20) r(58) r(0) r(59);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                margin-top: r(6);
                text-align: center;
                font-size: r(26);
            }
        }
        li:last-child{
            margin-right: r(24);
            background: #e0b7a0;
            .my-shou-img3{
                width: r(125);
                height: r(80);
                margin: r(20) r(32) r(0) r(38);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                margin-top: r(6);
                text-align: center;
                font-size: r(26);
            }
        }
    }
     .my-bao{
            width: 100%;
            height: r(107);
            .my-bao1{
                margin-left: r(23);
                div{
                    width: r(57);
                    height: r(74);
                    img{
                        margin-top: r(33);
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .my-bao2{
                margin-top: r(47);
                margin-right: r(21);
                span{
                    font-size: r(24);
                    i{
                        font-size: r(25);
                        color: #ff9344;
                    }
                }
            }
            .my-bao3{
                padding-top: r(47);
                margin-left: r(118);
                b{
                  font-size: r(26);
                  font-weight: normal;
                    }
            }
        }
        .my-dian{
            width: 100%;
            height: r(96);
            .my-dian1{
                margin-left: r(23);
                div{
                    width: r(71);
                    height: r(74);
                    img{
                       margin-top: r(23);
                       width: 100%;
                       height: 100%;
                    }
                }
            }
            .my-dian2{
                margin-top: r(37);
                margin-right: r(21);
                span{
                    font-size: r(24);
                    i{
                        font-size: r(25);
                        color: #ff9344;
                    }
                }
            }
            .my-dian3{
                padding-top: r(37);
                margin-left: r(118);
                b{
                  font-size: r(26);
                  font-weight: normal;
                    }
            }
        }
        .my-firend{
            width: 100%;
            height: r(91);
            .my-firend1{
                margin-left: r(23);
                div{
                    width: r(94);
                    height: r(58);
                    img{
                       margin-top: r(33);
                       width: 100%;
                       height: 100%;
                    }
                }
            }
            .my-firend2{
                margin-top: r(47);
                margin-right: r(21);
                span{
                    font-size: r(24);
                    i{
                        font-size: r(25);
                        color: #ff9344;
                    }
                }
            }
            .my-firend3{
                padding-top: r(47);
                margin-left: r(118);
                b{
                  font-size: r(26);
                  font-weight: normal;
                    }
            }
        }
        .my-zhu{
            width: 100%;
            height: r(181);
            .my-zhu1{
                margin-left: r(23);
                div{
                    width: r(59);
                    height: r(59);
                    margin-top: r(43);
                    img{
                       width: 100%;
                       height: 100%;
                    }
                }
            }
            .my-zhu2{
                margin-top: r(57);
                margin-right: r(21);
                span{
                    font-size: r(24);
                    i{
                        font-size: r(25);
                        color: #ff9344;
                    }
                }
            }
            .my-zhu3{
                padding-top: r(57);
                margin-left: r(118);
                b{
                  font-size: r(26);
                  font-weight: normal;
                    }
            }
        }
        .my-she{
            width: 100%;
            height: r(104);
            .my-she1{
                margin-left: r(30);
                div{
                    width: r(78);
                    height: r(79);
                    img{
                       width: 100%;
                       height: 100%;
                    }
                }
            }
            .my-she2{
                margin-right: r(21);
                span{
                    font-size: r(24);
                    i{
                        font-size: r(25);
                        color: #ff9344;
                    }
                }
            }
            .my-she3{
                margin-left: r(118);
                b{
                  font-size: r(26);
                  font-weight: normal;
                    }
            }
        }
        .my-about{
            width: 100%;
            height: r(94);
            .my-about1{
                margin-left: r(27);
                div{
                    width: r(84);
                    height: r(59);
                    img{
                       width: 100%;
                       height: 100%;
                    }
                }
            }
            .my-about2{
                margin-right: r(21);
                span{
                    font-size: r(24);
                    i{
                        font-size: r(25);
                        color: #ff9344;
                    }
                }
            }
            .my-about3{
                margin-left: r(118);
                b{
                  font-size: r(26);
                  font-weight: normal;
                    }
            }
        }
        .my-button{
            width: 100%;
            height: r(102);
            .my-button1{
                margin-left: r(110);
              button{
                  width: r(147);
                  height: r(76);
                  border: none;
                  background: #ff9344;
                  color: white;
                  border-radius: r(30);
                  font-size: r(24);
              }
              .button-two{
                  margin-left: r(245);
              }
            }
        }
}
